From 9212727f53e7d29f22804d155b87be3702380e57 Mon Sep 17 00:00:00 2001 From: Alexander Larsson Date: Wed, 27 Mar 2019 19:27:16 +0100 Subject: [PATCH] broadway: Use css transforms This allows generic transforms nodes to work. --- gdk/broadway/broadway-protocol.h | 2 +- gdk/broadway/broadway-server.c | 14 ++++++++++-- gdk/broadway/broadway.js | 30 ++++++++++++++++++++----- gsk/gskbroadwayrenderer.c | 38 +++++++++++++++++++++++--------- 4 files changed, 66 insertions(+), 18 deletions(-) diff --git a/gdk/broadway/broadway-protocol.h b/gdk/broadway/broadway-protocol.h index 70c5c18522..4f7b812e66 100644 --- a/gdk/broadway/broadway-protocol.h +++ b/gdk/broadway/broadway-protocol.h @@ -22,7 +22,7 @@ typedef enum { /* Sync changes with broadway.js */ BROADWAY_NODE_CLIP = 10, BROADWAY_NODE_KEEP_ALL = 11, BROADWAY_NODE_KEEP_THIS = 12, - BROADWAY_NODE_TRANSLATE = 13, + BROADWAY_NODE_TRANSFORM = 13, BROADWAY_NODE_DEBUG = 14, BROADWAY_NODE_REUSE = 15, } BroadwayNodeType; diff --git a/gdk/broadway/broadway-server.c b/gdk/broadway/broadway-server.c index ac9c424cf9..70a236ef46 100644 --- a/gdk/broadway/broadway-server.c +++ b/gdk/broadway/broadway-server.c @@ -1642,6 +1642,7 @@ broadway_server_has_client (BroadwayServer *server) #define NODE_SIZE_COLOR 1 #define NODE_SIZE_FLOAT 1 #define NODE_SIZE_POINT 2 +#define NODE_SIZE_MATRIX 16 #define NODE_SIZE_SIZE 2 #define NODE_SIZE_RECT (NODE_SIZE_POINT + NODE_SIZE_SIZE) #define NODE_SIZE_RRECT (NODE_SIZE_RECT + 4 * NODE_SIZE_SIZE) @@ -1670,6 +1671,7 @@ decode_nodes (BroadwayServer *server, guint32 size, n_children; gint32 texture_offset; guint32 hash; + guint32 transform_type; g_assert (*pos < len); @@ -1711,8 +1713,16 @@ decode_nodes (BroadwayServer *server, size = NODE_SIZE_RECT; n_children = 1; break; - case BROADWAY_NODE_TRANSLATE: - size = NODE_SIZE_POINT; + case BROADWAY_NODE_TRANSFORM: + transform_type = data[(*pos)]; + size = 1; + if (transform_type == 0) { + size += NODE_SIZE_POINT; + } else if (transform_type == 1) { + size += NODE_SIZE_MATRIX; + } else { + g_assert_not_reached(); + } n_children = 1; break; case BROADWAY_NODE_LINEAR_GRADIENT: diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js index c6e537c909..ae3d912ea6 100644 --- a/gdk/broadway/broadway.js +++ b/gdk/broadway/broadway.js @@ -13,7 +13,7 @@ const BROADWAY_NODE_OPACITY = 9; const BROADWAY_NODE_CLIP = 10; const BROADWAY_NODE_KEEP_ALL = 11; const BROADWAY_NODE_KEEP_THIS = 12; -const BROADWAY_NODE_TRANSLATE = 13; +const BROADWAY_NODE_TRANSFORM = 13; const BROADWAY_NODE_DEBUG = 14; const BROADWAY_NODE_REUSE = 15; @@ -630,12 +630,32 @@ TransformNodes.prototype.insertNode = function(parent, posInParent, oldNode) /* Bin nodes */ - case BROADWAY_NODE_TRANSLATE: + case BROADWAY_NODE_TRANSFORM: { - var point = this.decode_point(); + var transform_type = this.decode_uint32(); + var transform_string; + + if (transform_type == 0) { + var point = this.decode_point(); + transform_string = "translate(" + px(point.x) + "," + px(point.y) + ")"; + } else if (transform_type == 1) { + var m = new Array(); + for (var i = 0; i < 16; i++) { + m[i] = this.decode_float (); + } + + transform_string = + "matrix3d(" + + m[0] + "," + m[1] + "," + m[2] + "," + m[3]+ "," + + m[4] + "," + m[5] + "," + m[6] + "," + m[7] + "," + + m[8] + "," + m[9] + "," + m[10] + "," + m[11] + "," + + m[12] + "," + m[13] + "," + m[14] + "," + m[15] + ")"; + } + var div = document.createElement('div'); - div.style["position"] = "absolute"; - set_point_style(div, point); + div.style["transform"] = transform_string; + div.style["transform-origin"] = "0px 0px"; + this.insertNode(div, -1, oldChildren[0]); newNode = div; } diff --git a/gsk/gskbroadwayrenderer.c b/gsk/gskbroadwayrenderer.c index 0730ca8a73..e8cf1fe347 100644 --- a/gsk/gskbroadwayrenderer.c +++ b/gsk/gskbroadwayrenderer.c @@ -155,6 +155,17 @@ add_rounded_rect (GArray *nodes, const GskRoundedRect *rrect, float offset_x, fl add_size (nodes, &rrect->corner[i]); } +static void +add_matrix (GArray *nodes, graphene_matrix_t *matrix) +{ + float matrix_floats[16]; + int i; + + graphene_matrix_to_float (matrix, matrix_floats); + for (i = 0; i < 16; i++) + add_float (nodes, matrix_floats[i]); +} + static void add_color_stop (GArray *nodes, const GskColorStop *stop) { @@ -508,23 +519,30 @@ gsk_broadway_renderer_add_node (GskRenderer *renderer, GskTransform *transform = gsk_transform_node_get_transform (node); GskTransformCategory category = gsk_transform_get_category (transform); - if (category >= GSK_TRANSFORM_CATEGORY_2D_TRANSLATE) - { - if (add_new_node (renderer, node, BROADWAY_NODE_TRANSLATE)) { + if (add_new_node (renderer, node, BROADWAY_NODE_TRANSFORM)) { + if (category >= GSK_TRANSFORM_CATEGORY_2D_TRANSLATE) + { float dx, dy; gsk_transform_to_translate (transform, &dx, &dy); - add_xy (nodes, dx, dy, offset_x, offset_y); + add_uint32 (nodes, 0); // Translate + add_xy (nodes, dx, dy, 0, 0); gsk_broadway_renderer_add_node (renderer, gsk_transform_node_get_child (node), 0, 0); } - } - else - { - /* Fallback to texture for now */ - break; - } + else + { + graphene_matrix_t matrix; + + gsk_transform_to_matrix (transform, &matrix); + add_uint32 (nodes, 1); // General transform + add_matrix (nodes, &matrix); + gsk_broadway_renderer_add_node (renderer, + gsk_transform_node_get_child (node), + 0, 0); + } + } } return; -- 2.30.2